<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业级后台管理系统 - 静态预览</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; }
        .gradient-bg { background: linear-gradient(135deg, #1e40af 0%, #06b6d4 100%); }
        .card-hover { transition: all 0.3s ease; }
        .card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 登录页面预览 -->
    <div id="login-page" class="min-h-screen gradient-bg flex items-center justify-center p-6">
        <div class="max-w-4xl w-full grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
            <!-- 品牌展示区域 -->
            <div class="text-white space-y-6">
                <div class="space-y-4">
                    <h1 class="text-4xl font-bold">企业级管理系统</h1>
                    <p class="text-xl text-blue-100">智能化、数据驱动的企业管理解决方案</p>
                </div>
                <div class="space-y-4">
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-comments text-cyan-300 text-xl"></i>
                        <span>智能聊天集成</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-rocket text-cyan-300 text-xl"></i>
                        <span>版本发布管理</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-chart-bar text-cyan-300 text-xl"></i>
                        <span>用户行为分析</span>
                    </div>
                </div>
            </div>
            
            <!-- 登录表单 -->
            <div class="bg-white rounded-2xl shadow-2xl p-8">
                <div class="text-center mb-8">
                    <h2 class="text-2xl font-bold text-gray-900">欢迎登录</h2>
                    <p class="text-gray-600 mt-2">请输入您的账户信息</p>
                </div>
                
                <form class="space-y-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">用户名/邮箱</label>
                        <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="请输入用户名或邮箱">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">密码</label>
                        <input type="password" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="请输入密码">
                    </div>
                    
                    <div class="flex items-center justify-between">
                        <label class="flex items-center">
                            <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <span class="ml-2 text-sm text-gray-600">记住密码</span>
                        </label>
                        <a href="#" class="text-sm text-blue-600 hover:text-blue-500">忘记密码？</a>
                    </div>
                    
                    <button type="button" onclick="showDashboard()" class="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 transition duration-200 font-medium">
                        登录系统
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- 主控制台页面预览 -->
    <div id="dashboard-page" class="hidden min-h-screen bg-gray-50">
        <!-- 顶部导航栏 -->
        <nav class="bg-blue-900 text-white px-6 py-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-4">
                    <h1 class="text-xl font-bold">企业管理系统</h1>
                    <div class="text-sm text-blue-200">
                        <span>控制台</span> / <span>数据概览</span>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <i class="fas fa-bell text-cyan-300 cursor-pointer"></i>
                    <div class="flex items-center space-x-2">
                        <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop&crop=face" alt="用户头像" class="w-8 h-8 rounded-full">
                        <span class="text-sm">管理员</span>
                    </div>
                </div>
            </div>
        </nav>

        <div class="flex">
            <!-- 侧边栏 -->
            <aside class="w-64 bg-white shadow-lg min-h-screen">
                <div class="p-6">
                    <nav class="space-y-2">
                        <a href="#" onclick="showSection('dashboard')" class="flex items-center space-x-3 text-blue-600 bg-blue-50 px-4 py-3 rounded-lg">
                            <i class="fas fa-tachometer-alt"></i>
                            <span>控制台</span>
                        </a>
                        <a href="#" onclick="showSection('chat')" class="flex items-center space-x-3 text-gray-600 hover:text-blue-600 hover:bg-gray-50 px-4 py-3 rounded-lg">
                            <i class="fas fa-comments"></i>
                            <span>智能聊天</span>
                        </a>
                        <a href="#" onclick="showSection('release')" class="flex items-center space-x-3 text-gray-600 hover:text-blue-600 hover:bg-gray-50 px-4 py-3 rounded-lg">
                            <i class="fas fa-rocket"></i>
                            <span>版本发布</span>
                        </a>
                        <a href="#" onclick="showSection('analytics')" class="flex items-center space-x-3 text-gray-600 hover:text-blue-600 hover:bg-gray-50 px-4 py-3 rounded-lg">
                            <i class="fas fa-chart-bar"></i>
                            <span>数据分析</span>
                        </a>
                    </nav>
                </div>
            </aside>

            <!-- 主内容区域 -->
            <main class="flex-1 p-6">
                <!-- 控制台内容 -->
                <div id="dashboard-content">
                    <div class="mb-6">
                        <h2 class="text-2xl font-bold text-gray-900">数据概览</h2>
                        <p class="text-gray-600">系统运行状态和关键指标</p>
                    </div>

                    <!-- 关键指标卡片 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                        <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm font-medium text-gray-600">总用户数</p>
                                    <p class="text-2xl font-bold text-gray-900">24,847</p>
                                </div>
                                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-users text-blue-600 text-xl"></i>
                                </div>
                            </div>
                            <div class="mt-4 flex items-center">
                                <span class="text-green-600 text-sm font-medium">+12.5%</span>
                                <span class="text-gray-500 text-sm ml-1">较上月</span>
                            </div>
                        </div>

                        <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm font-medium text-gray-600">活跃会话</p>
                                    <p class="text-2xl font-bold text-gray-900">3,429</p>
                                </div>
                                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-mouse-pointer text-green-600 text-xl"></i>
                                </div>
                            </div>
                            <div class="mt-4 flex items-center">
                                <span class="text-green-600 text-sm font-medium">+8.2%</span>
                                <span class="text-gray-500 text-sm ml-1">较上月</span>
                            </div>
                        </div>

                        <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm font-medium text-gray-600">聊天对话</p>
                                    <p class="text-2xl font-bold text-gray-900">15,672</p>
                                </div>
                                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-comments text-purple-600 text-xl"></i>
                                </div>
                            </div>
                            <div class="mt-4 flex items-center">
                                <span class="text-green-600 text-sm font-medium">+23.1%</span>
                                <span class="text-gray-500 text-sm ml-1">较上月</span>
                            </div>
                        </div>

                        <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm font-medium text-gray-600">系统状态</p>
                                    <p class="text-2xl font-bold text-green-600">正常</p>
                                </div>
                                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-check-circle text-green-600 text-xl"></i>
                                </div>
                            </div>
                            <div class="mt-4 flex items-center">
                                <span class="text-green-600 text-sm font-medium">99.9%</span>
                                <span class="text-gray-500 text-sm ml-1">运行时间</span>
                            </div>
                        </div>
                    </div>

                    <!-- 图表区域 -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">用户增长趋势</h3>
                            <div class="h-64 bg-gradient-to-r from-blue-50 to-cyan-50 rounded-lg flex items-center justify-center">
                                <p class="text-gray-500">📈 用户增长图表区域</p>
                            </div>
                        </div>

                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">系统性能监控</h3>
                            <div class="h-64 bg-gradient-to-r from-green-50 to-blue-50 rounded-lg flex items-center justify-center">
                                <p class="text-gray-500">⚡ 性能监控图表区域</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 智能聊天内容 -->
                <div id="chat-content" class="hidden">
                    <div class="mb-6">
                        <h2 class="text-2xl font-bold text-gray-900">智能聊天管理</h2>
                        <p class="text-gray-600">AI对话管理和分析</p>
                    </div>
                    
                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">对话列表</h3>
                            <div class="space-y-3">
                                <div class="p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                                    <div class="flex items-center justify-between">
                                        <span class="font-medium">用户咨询 #001</span>
                                        <span class="text-sm text-gray-500">2分钟前</span>
                                    </div>
                                    <p class="text-sm text-gray-600 mt-1">关于产品功能的询问...</p>
                                </div>
                                <div class="p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                                    <div class="flex items-center justify-between">
                                        <span class="font-medium">技术支持 #002</span>
                                        <span class="text-sm text-gray-500">5分钟前</span>
                                    </div>
                                    <p class="text-sm text-gray-600 mt-1">系统集成相关问题...</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">聊天界面</h3>
                            <div class="h-64 border border-gray-200 rounded-lg p-4 overflow-y-auto">
                                <div class="space-y-3">
                                    <div class="flex justify-end">
                                        <div class="bg-blue-600 text-white px-4 py-2 rounded-lg max-w-xs">
                                            你好，我想了解一下系统功能
                                        </div>
                                    </div>
                                    <div class="flex justify-start">
                                        <div class="bg-gray-100 text-gray-900 px-4 py-2 rounded-lg max-w-xs">
                                            您好！我是AI助手，很高兴为您介绍我们的企业管理系统功能...
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">对话分析</h3>
                            <div class="space-y-4">
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600">满意度评分</span>
                                    <span class="text-lg font-semibold text-green-600">4.8/5.0</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600">平均响应时间</span>
                                    <span class="text-lg font-semibold text-blue-600">1.2秒</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600">解决率</span>
                                    <span class="text-lg font-semibold text-purple-600">92%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 版本发布内容 -->
                <div id="release-content" class="hidden">
                    <div class="mb-6">
                        <h2 class="text-2xl font-bold text-gray-900">版本发布管理</h2>
                        <p class="text-gray-600">自动化部署和版本控制</p>
                    </div>
                    
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">当前发布状态</h3>
                            <div class="space-y-4">
                                <div class="flex items-center justify-between p-4 bg-green-50 rounded-lg">
                                    <div>
                                        <p class="font-medium text-green-900">生产环境</p>
                                        <p class="text-sm text-green-600">v2.1.3 - 运行正常</p>
                                    </div>
                                    <i class="fas fa-check-circle text-green-600 text-xl"></i>
                                </div>
                                <div class="flex items-center justify-between p-4 bg-blue-50 rounded-lg">
                                    <div>
                                        <p class="font-medium text-blue-900">测试环境</p>
                                        <p class="text-sm text-blue-600">v2.2.0 - 测试中</p>
                                    </div>
                                    <i class="fas fa-sync-alt text-blue-600 text-xl animate-spin"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">发布历史</h3>
                            <div class="space-y-3">
                                <div class="flex items-center space-x-3 p-3 border-l-4 border-green-500 bg-green-50">
                                    <i class="fas fa-check-circle text-green-600"></i>
                                    <div>
                                        <p class="font-medium">v2.1.3 发布成功</p>
                                        <p class="text-sm text-gray-600">2024-01-15 14:30</p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-3 p-3 border-l-4 border-blue-500 bg-blue-50">
                                    <i class="fas fa-rocket text-blue-600"></i>
                                    <div>
                                        <p class="font-medium">v2.1.2 发布成功</p>
                                        <p class="text-sm text-gray-600">2024-01-10 09:15</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 数据分析内容 -->
                <div id="analytics-content" class="hidden">
                    <div class="mb-6">
                        <h2 class="text-2xl font-bold text-gray-900">用户行为分析</h2>
                        <p class="text-gray-600">深入了解用户行为和系统使用情况</p>
                    </div>
                    
                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                        <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">用户活动趋势</h3>
                            <div class="h-64 bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg flex items-center justify-center">
                                <p class="text-gray-500">📊 用户活动趋势图表</p>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">设备分布</h3>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-2">
                                        <i class="fas fa-desktop text-blue-600"></i>
                                        <span class="text-sm">桌面端</span>
                                    </div>
                                    <span class="text-sm font-medium">45%</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-2">
                                        <i class="fas fa-mobile-alt text-green-600"></i>
                                        <span class="text-sm">移动端</span>
                                    </div>
                                    <span class="text-sm font-medium">35%</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-2">
                                        <i class="fas fa-tablet-alt text-orange-600"></i>
                                        <span class="text-sm">平板端</span>
                                    </div>
                                    <span class="text-sm font-medium">20%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script>
        function showDashboard() {
            document.getElementById('login-page').classList.add('hidden');
            document.getElementById('dashboard-page').classList.remove('hidden');
        }

        function showSection(section) {
            // 隐藏所有内容区域
            document.getElementById('dashboard-content').classList.add('hidden');
            document.getElementById('chat-content').classList.add('hidden');
            document.getElementById('release-content').classList.add('hidden');
            document.getElementById('analytics-content').classList.add('hidden');
            
            // 显示选中的内容区域
            document.getElementById(section + '-content').classList.remove('hidden');
            
            // 更新导航状态
            const navLinks = document.querySelectorAll('aside a');
            navLinks.forEach(link => {
                link.classList.remove('text-blue-600', 'bg-blue-50');
                link.classList.add('text-gray-600');
            });
            
            event.target.closest('a').classList.remove('text-gray-600');
            event.target.closest('a').classList.add('text-blue-600', 'bg-blue-50');
        }
    </script>
</body>
</html>